<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易记事本</title>
  <style>
    :root {
      --primary-color: #4a6bdf;
      --primary-dark: #3a5bcf;
      --text-color: #333;
      --bg-color: #f5f5f5;
      --card-bg: #ffffff;
      --button-bg: #e9ecef;
      --button-hover: #ced4da;
      --button-text: #212529;
      --dropdown-bg: #ffffff;
      --border-color: #dee2e6;
      --border-radius: 4px;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      --toolbar-height: 36px;
      --statusbar-height: 24px;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .toolbar {
      background-color: var(--card-bg);
      border-bottom: 1px solid var(--border-color);
      height: var(--toolbar-height);
      display: flex;
      align-items: center;
      padding: 0 10px;
      gap: 5px;
    }
    
    .toolbar-button {
      position: relative;
      cursor: pointer;
      padding: 6px 10px;
      border: none;
      background: none;
      color: var(--text-color);
      font-size: 14px;
      border-radius: var(--border-radius);
    }
    
    .toolbar-button:hover {
      background-color: var(--button-hover);
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 160px;
      background-color: var(--dropdown-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      z-index: 10;
    }
    
    .dropdown-item {
      padding: 8px 12px;
      text-decoration: none;
      display: block;
      color: var(--text-color);
      font-size: 14px;
      cursor: pointer;
    }
    
    .dropdown-item:hover {
      background-color: var(--button-hover);
    }
    
    .dropdown.active .dropdown-content {
      display: block;
    }
    
    .editor {
      flex: 1;
      overflow: hidden;
      display: flex;
    }
    
    #notepad {
      width: 100%;
      height: 100%;
      padding: 10px;
      border: none;
      resize: none;
      outline: none;
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: 16px;
      line-height: 1.5;
    }
    
    .statusbar {
      background-color: var(--card-bg);
      border-top: 1px solid var(--border-color);
      height: var(--statusbar-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      font-size: 12px;
      color: #777;
    }
    
    .separator {
      border-left: 1px solid var(--border-color);
      height: 20px;
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <div class="dropdown" id="file-menu">
      <button class="toolbar-button">文件</button>
      <div class="dropdown-content">
        <div class="dropdown-item" onclick="newFile()">新建</div>
        <div class="dropdown-item" onclick="openFile()">打开...</div>
        <div class="dropdown-item" onclick="saveFile()">保存</div>
      </div>
    </div>
    
    <div class="dropdown" id="edit-menu">
      <button class="toolbar-button">编辑</button>
      <div class="dropdown-content">
        <div class="dropdown-item" onclick="document.execCommand('cut')">剪切</div>
        <div class="dropdown-item" onclick="document.execCommand('copy')">复制</div>
        <div class="dropdown-item" onclick="document.execCommand('paste')">粘贴</div>
        <div class="dropdown-item" onclick="selectAll()">全选</div>
      </div>
    </div>
    
    <div class="dropdown" id="view-menu">
      <button class="toolbar-button">查看</button>
      <div class="dropdown-content">
        <div class="dropdown-item" onclick="changeFontSize(1)">增大字体</div>
        <div class="dropdown-item" onclick="changeFontSize(-1)">减小字体</div>
        <div class="dropdown-item" onclick="toggleWordWrap()">自动换行</div>
      </div>
    </div>
  </div>
  
  <div class="editor">
    <textarea id="notepad" wrap="soft" spellcheck="false"></textarea>
  </div>
  
  <div class="statusbar">
    <div id="modified">未修改</div>
    <div class="status-right">
      <span id="charCount">0 个字符</span>
      <span class="separator"></span>
      <span id="lineCount">1 行</span>
    </div>
  </div>

  <script>
    // 获取SDK
    const AppSDK = window.AppSDK || {};
    
    // 元素引用
    const notepad = document.getElementById('notepad');
    const modifiedIndicator = document.getElementById('modified');
    const charCountEl = document.getElementById('charCount');
    const lineCountEl = document.getElementById('lineCount');
    const dropdowns = document.querySelectorAll('.dropdown');
    
    // 状态
    let modified = false;
    let currentFile = null;
    let fontSize = 16;
    let wordWrap = true;
    
    // 初始化
    function init() {
      // 加载上次的内容
      loadContent();
      
      // 事件监听器
      notepad.addEventListener('input', handleInput);
      
      // 下拉菜单管理
      dropdowns.forEach(dropdown => {
        const btn = dropdown.querySelector('.toolbar-button');
        
        btn.addEventListener('click', (e) => {
          e.stopPropagation();
          closeAllDropdowns();
          dropdown.classList.toggle('active');
        });
      });
      
      // 点击外部关闭下拉菜单
      document.addEventListener('click', closeAllDropdowns);
      
      // 退出前保存提示
      window.addEventListener('beforeunload', (e) => {
        if (modified) {
          e.preventDefault();
          e.returnValue = '文档已修改，是否要保存更改？';
          return e.returnValue;
        }
      });
      
      // 禁用浏览器默认的拖放功能
      document.addEventListener('dragover', (e) => e.preventDefault());
      document.addEventListener('drop', (e) => e.preventDefault());
      
      // 更新统计信息
      updateStats();
    }
    
    // 关闭所有下拉菜单
    function closeAllDropdowns() {
      dropdowns.forEach(dropdown => {
        dropdown.classList.remove('active');
      });
    }
    
    // 处理输入
    function handleInput() {
      if (!modified) {
        modified = true;
        modifiedIndicator.textContent = '已修改';
      }
      
      updateStats();
      saveContent();
    }
    
    // 更新统计信息
    function updateStats() {
      const text = notepad.value;
      const charCount = text.length;
      const lineCount = text ? text.split('\n').length : 1;
      
      charCountEl.textContent = `${charCount} 个字符`;
      lineCountEl.textContent = `${lineCount} 行`;
    }
    
    // 新建文件
    function newFile() {
      if (modified) {
        if (!confirm('当前文档未保存，是否放弃更改？')) {
          return;
        }
      }
      
      notepad.value = '';
      currentFile = null;
      modified = false;
      modifiedIndicator.textContent = '未修改';
      updateStats();
      saveContent();
    }
    
    // 打开文件
    async function openFile() {
      if (modified) {
        if (!confirm('当前文档未保存，是否放弃更改？')) {
          return;
        }
      }
      
      if (AppSDK.openFile) {
        try {
          const result = await AppSDK.openFile({
            extensions: ['.txt', '.md', '.js', '.html', '.css'],
            multiple: false
          });
          
          if (result && result.content) {
            notepad.value = result.content;
            currentFile = result.name;
            modified = false;
            modifiedIndicator.textContent = '未修改';
            updateStats();
            saveContent();
          }
        } catch (error) {
          console.error('打开文件失败:', error);
          alert('打开文件失败');
        }
      } else {
        alert('该功能需要应用SDK支持');
      }
    }
    
    // 保存文件
    async function saveFile() {
      const content = notepad.value;
      
      if (AppSDK.saveFile) {
        try {
          const filename = currentFile || 'untitled.txt';
          await AppSDK.saveFile(new Blob([content], { type: 'text/plain' }), filename);
          
          modified = false;
          modifiedIndicator.textContent = '未修改';
        } catch (error) {
          console.error('保存文件失败:', error);
          alert('保存文件失败');
        }
      } else {
        alert('该功能需要应用SDK支持');
      }
    }
    
    // 保存内容到本地存储
    function saveContent() {
      if (AppSDK.setData) {
        AppSDK.setData('notepad', {
          content: notepad.value,
          fontSize,
          wordWrap,
          modified,
          timestamp: new Date().toISOString()
        });
      }
    }
    
    // 从本地存储加载内容
    async function loadContent() {
      if (AppSDK.getData) {
        try {
          const data = await AppSDK.getData('notepad');
          
          if (data && data.content) {
            notepad.value = data.content;
            
            if (data.fontSize) {
              fontSize = data.fontSize;
              notepad.style.fontSize = `${fontSize}px`;
            }
            
            if (data.wordWrap !== undefined) {
              wordWrap = data.wordWrap;
              notepad.wrap = wordWrap ? 'soft' : 'off';
            }
            
            if (data.modified) {
              modified = data.modified;
              modifiedIndicator.textContent = modified ? '已修改' : '未修改';
            }
          }
        } catch (error) {
          console.error('加载内容失败:', error);
        }
      }
    }
    
    // 全选
    function selectAll() {
      notepad.select();
    }
    
    // 修改字体大小
    function changeFontSize(delta) {
      fontSize = Math.max(8, Math.min(32, fontSize + delta));
      notepad.style.fontSize = `${fontSize}px`;
      saveContent();
    }
    
    // 切换自动换行
    function toggleWordWrap() {
      wordWrap = !wordWrap;
      notepad.wrap = wordWrap ? 'soft' : 'off';
      saveContent();
    }
    
    // 初始化应用
    init();
  </script>
</body>
</html> 